<template>
	<view>
		<view style="width: 750rpx;height: 104rpx;margin-top: -20rpx;border-bottom: 1rpx solid #E5E5E5;">
			<uni-search-bar @confirm="search" @input="input()" placeholder="名称搜索" :radius="100" clearButton="none" cancelButton="none" bgColor="#F2F3F5"></uni-search-bar>
		</view>
		<view style="display: flex;">
			<scroll-view class="left" scroll-y >
				<view 
				 style="display: flex; background-color: #FFFFFF;">
				<view style="width: 8rpx;height: 32rpx;background-color:#388CFE ;margin-left: -48rpx;margin-right: 24rpx;margin-top: 32rpx;"></view>
				下应街道</view>	
			</scroll-view>
			<scroll-view class="right" scroll-y>
				<view v-for="(item,index) in secondDate"  :key="index">
					<view :class="item.active?'view':'aaa'" @click="rightClick(item)" style="display: flex;">
						<view style="height: 96rpx;width: 510rpx;font-size: 28rpx;line-height: 96rpx;float: left;">{{item.name}}</view>
						<image v-if="item.active==true" style="float: right;margin-right: 28rpx;width: 44rpx;height: 44rpx;margin-top: 24rpx;" src="../../static/icon_success@3x.png"></image>
					</view>
					 
				</view>
			</scroll-view>
		</view>
		<view style="display: flex;position: fixed;bottom: 0;width: 750rpx;height: 120rpx;background-color: #FFFFFF;">
			<image src="../../static/icongou@3x.png" style="width: 44rpx;height: 44rpx;margin-left: 28rpx;margin-top: 38rpx;float: left;"></image>
			<view style="float: left;font-size: 32rpx;margin-left: 8rpx;margin-top: 44rpx;line-height: 32rpx;">已选择</view>
			<view style="float: left;color: #388CFE;font-size: 32rpx;line-height: 32rpx;margin-top: 44rpx;margin-left: 10rpx;">{{num}}</view>
			<button style="float: right;width: 460rpx;height: 94rpx;background-color: #519AFF;color: #FFFFFF;margin-top: 14rpx;margin-right: 28rpx;border-radius: 47rpx;">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active:0,
				cates:[],
				secondDate:[],
				id:'',
				active1:'',
				view:'',
				num:0,
			}
		},
		methods: {
			async getName(){
				//console.log(2333333333);
				this.$myRequest({
						url:'/inspect/v1/owner_flood/page',
						data:{"pageNum":"1","pageSize":"100","areaId":"330212002"}
					}).then((res)=>{
						this.secondDate= res.data.data.list;
						this.secondDate.forEach(e=>{
							e.active = false
						})
					});
			},
			
			rightClick(e){
				console.log(e,'eee11');
				
				e.active = !e.active
				console.log(e.active);
				this.$forceUpdate()
				if(e.active==true){
					this.num++
				}
				else{
					this.num--
				}
				// this.view=id
			},
			async getName1(id){
				console.log(2333333333);
				this.$myRequest({
					url:'/inspect/v1/owner_flood/page',
					data:{"pageNum":"1","pageSize":"100","areaId":330212906}
				}).then((res)=>{
					console.log(res.data,'res000');
					this.secondDate = res.data.data.children;
					console.log(this.secondDate,'this.secondDate');
					this.secondDate && this.secondDate.forEach(e=>{
						e.active = false
					})
					})
			},
			change(){
				this.active1=index
			}
		},
		
		onLoad() {
			
		},
		onShow() {
			this.getName().then(()=>{
				// console.log(222);
				// this.getName1()
			})
		}
		
	}
</script>

<style lang="scss">
	scroll-view ::-webkit-scrollbar {
	width: 0;
	height: 0;
	background-color: transparent;
	}
.left{
		
		width:240rpx;
		height: 86vh;
		background-color: #F2F3F5;
		// border-right: 1px solid #eee;
		view{
			height: 96rpx;
			line-height: 96rpx;
			color: #333;
			padding-left: 24rpx;
			font-size: 28rpx;
			// border-bottom: 1px solid #eee;	
			background-color: #f5f5f5;
		}
		
		.active{
			background-color: #ffffff;
		}
}
.right{
	width: 510rpx;
	height: 94vh;
	margin-left: 24rpx;
	
}

.view{
	height: 96rpx;
	width: 510rpx;
	font-size: 28rpx;
	line-height: 96rpx;
	color: #388CFE;
}
</style>
